<template>
    <view class="pub_page pub_tree_pledge_list pub_ecology_tree pub_header_padding">
        <pub-head headerName="tree_pledge_list" :headerConfig="headerConfig"></pub-head>
        <div class="pub_page_scroll page_box">
            <div class="plis_div">
                <div class="li_td li_th">
                    <!-- <div class="li">到期时间</div> -->
                    <div class="li">数量</div>
                    <div class="li">映射</div>
                </div>
                <div class="li_td" v-for="(li,key) in list" :key="key">
                    <!-- <div class="li">{{ li.endTime.substring(0,11) }}</div> -->
                    <div class="li">{{ li.num }} CTT</div>
                    <div class="li">{{ li.mappingNum }} 金币</div>
                    <div class="li">
                        <div class="btn" @click="toDeal('open_jiaye',li,key)">解押</div>
                    </div>
                </div>
            </div>
        </div>

        <view class="tree_alert_div" v-if="zhiyaShow">
            <div class="alert_box">
                <div class="title">解押
                    <text class="close icon-font-basic icon-b-off-1" @click="zhiyaShow=false"></text>
                </div>
                <div class="content">当前解押需退回映射：{{zhiyaInfo.data.mappingNum}} 金币</div>
                <div class="btn" @click="toDeal('sure_jieya')">确定解押</div>
            </div>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                title: '解压',//标题栏内容
                left_type: 3,
                title_color: '#000'
            },

            zhiyaShow: false,
            zhiyaInfo: '',
            list: [],
        };
    },
    onLoad() {
        this.getMyPledgeList();
    },
    methods: {
        async getMyPledgeList() {
            this.$comFun.openLoading();
            const res = await this.$request.get('user/myPledgeList', {});
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                this.list = res.result;
            }
        },
        async toDeal(type, data_1, data_2) {
            switch (type) {
                case 'open_jiaye':
                    this.zhiyaInfo = {
                        data: data_1,
                        key: data_2
                    }
                    this.zhiyaShow = true;
                    break;
                case 'sure_jieya':
                    this.$comFun.openLoading();
                    const res_2 = await this.$request.get('user/cancelPledge', {
                        id: this.zhiyaInfo.data.id
                    });
                    // console.log(res_2);
                    this.$comFun.closeLoading();
                    if (res_2.code == 200) {
                        this.zhiyaInfo = '';
                        this.zhiyaShow = false;
                        this.list.splice(this.zhiyaInfo.key, 1);
                        this.$comFun.toast('解压成功');
                        uni.$emit("reloadTreePageInfo");
                    } else {
                        this.$comFun.toast(res_2.message);
                    }
                    break;
                default:
                    break;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/ecology.scss";
</style>
